<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type='text/javascript' src='../js/vue.js'></script>
</head>

<body>
    <!-- 
        1.计算属性是指由已有的属性计算和加工
        2.底层借助了Object.defineproperty方法提供的getter和setter
        3.get执行？！！
            初次读取会执行一次
            依赖数据发生改变会再次调用
        4.与methods相比，内部有缓存机制（复用）效率更高，调制更方便
        5.  计算属性最终会在vm上，直接读取使用即可；
            如果计算属性修改，要用set函数相应修改
     -->
    <div id="root">
        姓：<input type='text' v-model='firstName' /><br /><br />
        名：<input type='text' v-model='lastName' /><br /><br />
        <!-- 多次执行只执行一次，因为缓存 -->
        名字：<span>{{fullName}}</span>
        名字：<span>{{fullName}}</span>
        名字：<span>{{fullName}}</span>

    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                firstName: 'SONG',
                lastName: 'YAXUAN'
            },
            computed: {
                fullName:{
                    //当有人读取fullName时，get会调用，并且返回值作为fullName的值
                    //get调用：初次读取fullName时，调用；
                    //所依赖的数据发生变化时，调用
                    get() {
                        // console.log(this)//this是new Vue
                        return this.firstName + '-' + this.lastName
                    },
                    //set只有fulName修改时才调用
                    set(value) {
                        console.log('set', value)
                        const arr = value.split('-');
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }
                }
            }

        })
        console.log(vm);
    </script>
</body>

</html>